<!--
 * @Descripttion: 
 * @version: 
 * @Author: 尹伊
 * @Date: 2020-09-08 19:05:21
 * @LastEditors: 尹伊
 * @LastEditTime: 2020-12-21 17:44:25
-->
<template>
  <div class="file_holder">
    <div class="file_header">日志</div>
    <div class="lines">
      <div class="line_numbers">
        <a href v-for="item in num" :key="item">{{item}}</a>
      </div>
      <div class="highlight">
        <div>
          <span class="line">{{content}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      content:
        "裤哈伦裤的风打开了房间空间卢拉asdfadsfewrwerwe奥利弗了就是浪费就拉萨机登录接口框剪短发了123123afafsf解阿东了房间里卡多分了解三大法律框架阿兰；水淀粉即可",
      num: 1
    };
  },
  created() {
    this.num = Math.ceil((this.content.length * 12) / 436);
  },
  methods: {}
};
</script>
<style scoped lang='scss'>
.file_holder {
  width: 500px;
  /* height: 500px; */
  margin: 100px auto;
  margin-bottom: 1em;
  text-align: left;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 2px 2px 0px 0px;

  .file_header {
    width: 100%;
    height: 50px;
    color: #333;
    font-size: 16px;
    line-height: 40px;
    padding: 5px 10px;
    background: #fcfcfc;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-bottom: 1px solid #dce3e8;
  }

  .lines {
    display: flex;
    margin: 0;
    padding: 0;
    box-shadow: none;

    .line_numbers {
      color: #666;
      padding: 10px 6px;
      text-align: right;
      float: left;

      a {
        display: block;
        font-size: 12px !important;
        line-height: 20px !important;
        min-width: 30px;
        white-space: nowrap;
        color: rgba(27, 31, 35, 0.3);
        font-family: consolas, Courier, "MS Courier New", monospace;
      }
    }

    .highlight {
      overflow: auto;
      overflow-y: hidden;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      min-width: 0;

      div {
        /* white-space: pre; */
        overflow-y: hidden;
        border: none;
        border-radius: 0;
        font-family: consolas, Courier, "MS Courier New", monospace;
        font-size: 12px !important;
        line-height: 16px !important;
        margin: 0;
        padding: 10px 0;
        tab-size: 4;
      }

      .line {
        display: block;
        padding: 0 10px;
        line-height: 20px;
        min-height: 20px;
      }
    }
  }
}
</style>